<template>
  <div>
    <tableComponents
      :pagination="{ currentPage, pageSize, total: list.all_num }"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      @sendUserSearch="getSearch"
      :searchData="searchData"
      :isHaveExport="false"
      @toAdd="editHotel"
    >
      <template v-slot:table>
        <el-table
          ref="multipleTable"
          :data="list.data"
          stripe
          v-loading="loading"
          header-row-class-name="head_color"
          tooltip-effect="dark"
          style="width: 99.8%"
        >
          <el-table-column label="酒店LOGO" min-width="50">
            <template slot-scope="scope">
              <div class="img_bor_tx">
                <img :src="$fnc.getImgUrl(scope.row.logo)" class="user_img" />
              </div>
            </template>
          </el-table-column>

          <el-table-column label="酒店封面" min-width="100">
            <template slot-scope="scope">
              <el-popover placement="right" title trigger="hover">
                <img :src="$fnc.getImgUrl(scope.row.img)" style="width:300px;" />
                <img slot="reference" :src="scope.row.img" :alt="scope.row.img" style="width:100px" />
              </el-popover>
            </template>
          </el-table-column>

          <el-table-column label="酒店信息" min-width="150">
            <template slot-scope="scope">
              <div class="user_table">
                <span>酒店名称：</span>
                <small>{{ scope.row.title }}</small>
                <br />
                <span>酒店电话：</span>
                <small>{{ scope.row.tel }}</small>
                <br />
                <span>酒店地址：</span>
                <small>{{ scope.row.province+scope.row.city+scope.row.area+scope.row.town+scope.row.address }}</small>
                <br />
              </div>
            </template>
          </el-table-column>

          <el-table-column label="供应商信息" min-width="120">
            <template slot-scope="scope">
              <div class="user_table" v-if="scope.row.uid > 0">
                <span>供应商账号：</span>
                <small>{{ scope.row.username }}</small>
                <br />
                <span>供应商昵称：</span>
                <small>{{ scope.row.nickname }}</small>
                <br />
              </div>
              <div v-else>自营酒店</div>
            </template>
          </el-table-column>

          <el-table-column label="其他信息" min-width="120">
            <template slot-scope="scope">
              <div class="user_table">
                <span>标签：</span>
                <small>{{ scope.row.label }}</small>
                <br />
                <span>评分：</span>
                <small>{{ scope.row.score }}</small>
                <br />
                <span>评价数量：</span>
                <small>{{ scope.row.score_number }}</small>
                <br />
              </div>
            </template>
          </el-table-column>

          <el-table-column label="是否显示" min-width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-switch
                class="zdySwith"
                :width="82"
                v-model="scope.row.is_show"
                active-color="#1aad19"
                inactive-color="#ffffff"
                active-text="显示"
                inactive-text="不显示"
                active-value="1"
                @change="getIndex1(scope.row.id)"
                inactive-value="0"
              ></el-switch>
            </template>
          </el-table-column>

          <el-table-column label="是否推荐" min-width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-switch
                class="zdySwith"
                :width="82"
                v-model="scope.row.is_home"
                active-color="#1aad19"
                inactive-color="#ffffff"
                active-text="推荐"
                inactive-text="不推荐"
                active-value="1"
                @change="getIndex(scope.row.id)"
                inactive-value="0"
              ></el-switch>
            </template>
          </el-table-column>

          <el-table-column label="操作" min-width="120">
            <template slot-scope="scope">
              <el-row class="myblank">
                <el-button
                  :loading="$store.state.isLoading"
                  size="mini"
                  @click="editHotelimgs(scope.row)"
                  type="warning"
                >设置轮播图</el-button>
                <el-button
                  :loading="$store.state.isLoading"
                  size="mini"
                  @click="editHotelJs(scope.row)"
                  type="success"
                >编辑介绍概况</el-button>
                <br />
                <el-button
                  :loading="$store.state.isLoading"
                  size="mini"
                  @click="goHotelHome(scope.row.id)"
                  type="success"
                >管理房间</el-button>
                <br />
                <el-button
                  :loading="$store.state.isLoading"
                  size="mini"
                  @click="editHotel(scope.row)"
                  type="primary"
                >编辑</el-button>
                <el-button
                  :loading="$store.state.isLoading"
                  size="mini"
                  type="danger"
                  @click="deleteNew(scope.row.id)"
                >删除</el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>

    <el-dialog
      :close-on-click-modal="false"
      :title="Hotel.id ? '编辑' : '添加'"
      :modal-append-to-body="false"
      :visible.sync="showHotel"
      class="tl size_13"
      width="800px"
    >
      <el-form :model="Hotel" label-width="120px">
        <el-form-item label="酒店名称" required>
          <el-col :span="14">
            <el-input v-model="Hotel.title" clearable></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="酒店logo" required>
          <el-col :span="14">
            <el-input v-model="Hotel.logo" disabled autocomplete="off"></el-input>
            <compressimgUpload
              :onSuccess="onSuccess1"
              :pic="Hotel.logo"
              :isOneImg="true"
              :files="fileList"
            ></compressimgUpload>
          </el-col>
        </el-form-item>

        <el-form-item label="酒店封面" required>
          <el-col :span="14">
            <el-input v-model="Hotel.img" disabled autocomplete="off"></el-input>
            <compressimgUpload
              :onSuccess="onSuccess2"
              :pic="Hotel.img"
              :isOneImg="true"
              :files="fileList"
            ></compressimgUpload>
          </el-col>
        </el-form-item>

        <el-form-item label="酒店电话" required>
          <el-col :span="14">
            <el-input v-model="Hotel.tel" clearable></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="所在省市区" prop="province">
          <el-col :span="14">
            <city-cascader size="large" :placeholder="plad" :level="2" @change="handleChange" />
          </el-col>
        </el-form-item>

        <el-form-item label="地址" prop="add">
          <el-col :span="14">
            <el-input placeholder v-model="Hotel.address" clearable></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="经纬度">
          <el-col :span="14">
            <el-input placeholder v-model="JWD" clearable>
              <template slot="append">
                <a target="_blank" :href="'https://lbs.qq.com/tool/getpoint/index.html'">
                  <el-button :loading="$store.state.isLoading" size="mini">查看经纬度</el-button>
                </a>
              </template>
            </el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="logo标签">
          <el-col :span="14">
            <el-select v-model="label_logo" style="width: 100%;" multiple clearable>
              <el-option
                v-for="item in logoList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>

        <el-form-item label="标签(用@隔开)">
          <el-col :span="14">
            <el-input type="textarea" :rows="3" v-model="Hotel.label" clearable></el-input>
          </el-col>
        </el-form-item>
        
        <el-form-item>
          <el-button
            :loading="$store.state.isLoading"
            size="medium"
            type="primary"
            @click.prevent="subHotel"
          >确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      title="设置"
      :modal-append-to-body="false"
      :visible.sync="showHotelImgs"
      class="tl size_13"
      width="800px"
    >
      <el-form class="mar_top" label-width="120px">
        <el-form-item label="图片地址">
          <el-col :span="24" v-for="(item, index) in piclink" :key="index">
            <el-col :span="12" class="mr">
              <el-input
                v-model="item.img"
                autocomplete="off"
                size="small"
                clearable disabled
                class="mar_bottom_5"
              ></el-input>
              <uploadpic
                :piclink="item.img"
                :width="150"
                :height="150"
                :is_more="false"
                @send_pic="onSuccess3($event,index)"
              ></uploadpic>
            </el-col>
            <el-col :span="1" v-if="index == 0">
              <el-button
                :loading="$store.state.isLoading"
                @click="addImgs"
                type="primary"
                size="small"
                icon="el-icon-plus"
              ></el-button>
            </el-col>
            <el-col :span="1" v-if="index>0">
              <el-button
                :loading="$store.state.isLoading"
                @click="removeImgs(index)"
                type="danger"
                size="small"
                icon="el-icon-delete"
              ></el-button>
            </el-col>
          </el-col>
        </el-form-item>
        <div class="mar_bottom_15">
          <span class="sizeColor size_13 sp_style"></span>
          <el-button
            :loading="$store.state.isLoading"
            size="medium"
            type="primary"
            @click.prevent="subHotel"
          >确定</el-button>
        </div>
      </el-form>
    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      title="介绍"
      :modal-append-to-body="false"
      :visible.sync="showHotelJs"
      class="tl size_13"
      width="800px"
    >
      <ue
        v-model="Hotel.recommend"
        :value="Hotel.recommend"
        upload-url="/api/common/upload/index/"
        fileName="file"
      />
      <div class="mar_bottom_15">
        <el-button
          :loading="$store.state.isLoading"
          size="medium"
          type="primary"
          @click.prevent="subHotel"
        >确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { hotelListSearchData } from "@/assets/js/searchData/searchData"; //引入搜索的数据
import compressimgUpload from "@/components/currency/compressimgUpload.vue";
import cityCascader from "@/components/currency/cityCascader/cityCascader";
import uploadpic from "@/components/page/pic/up_pic";
import ue from "@/components/currency/Ue/ue.vue";
export default {
  data() {
    return {
      searchData: hotelListSearchData,
      loading: false,
      list: [],
      pageSize: 10,
      currentPage: 1,
      searchAll: {},
      Hotel: {},
      showHotel: false,
      showHotelImgs: false,
      selectedOptions: [],
      fileList: [],
      JWD: "",
      plad: "",
      logoList: [],
      label_logo: [],
      piclink: [{ img: "" }],
      showHotelJs: false
    };
  },
  components: {
    compressimgUpload,
    cityCascader,
    uploadpic,
    ue
  },
  methods: {
    getIndex1(id) {
      this.$api.getHotel.hotel_is_show({ id: id }).then(res => {
        if (res.data.code == 200) {
          this.getNewsAll(this.searchAll);
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    },
    editHotelJs(item) {
      this.Hotel = item;
      this.selectedOptions = [
        this.Hotel.province,
        this.Hotel.city,
        this.Hotel.area
      ];
      if (this.Hotel.town) {
        this.selectedOptions.push(this.Hotel.town);
      }
      this.plad = this.selectedOptions.join("-");
      this.JWD = this.Hotel.latitude + "," + this.Hotel.longitude;
      this.label_logo = this.Hotel.label_logo.split("@");
      this.piclink = JSON.parse(this.Hotel.piclink);
      this.showHotelJs = true;
    },
    onSuccess3(pic, i) {
      this.piclink[i].img = pic;
    },
    removeImgs(index) {
      this.piclink.splice(index, 1);
    },
    addImgs() {
      this.piclink.push({
        img: ""
      });
    },
    editHotelimgs(item) {
      this.Hotel = item;
      this.selectedOptions = [
        this.Hotel.province,
        this.Hotel.city,
        this.Hotel.area
      ];
      if (this.Hotel.town) {
        this.selectedOptions.push(this.Hotel.town);
      }
      this.plad = this.selectedOptions.join("-");
      this.JWD = this.Hotel.latitude + "," + this.Hotel.longitude;
      this.label_logo = this.Hotel.label_logo.split("@");
      this.piclink = JSON.parse(this.Hotel.piclink);
      this.showHotelImgs = true;
    },
    getLogo() {
      this.$api.getHotel.hotel_label_logo_lists({}).then(res => {
        if (res.data.code == 200) {
          this.logoList = res.data.result.data;
        }
      });
    },
    goHotelHome(id) {
        this.$store.commit("addbreadcrumbs", {
        title: "管理房间",
        url: `/index/hotel/hotel_home_list?id=${id}`
      });
      this.$router.push({
        path: "/index/hotel/hotel_home_list",
        query: { id }
      });
    },
    handleChange(value) {
      if (value) {
        for (var i = 0; i < value.length; i++) {
          if (i == 0) this.Hotel.province = value[i];
          if (i == 1) this.Hotel.city = value[i];
          if (i == 2) this.Hotel.area = value[i];
          if (i == 3) this.Hotel.town = value[i];
        }
      }
    },
    onSuccess1(pic) {
      this.Hotel.logo = pic;
    },
    onSuccess2(pic) {
      this.Hotel.img = pic;
    },
    getIndex(id) {
      this.$api.getHotel.hotel_is_home({ id: id }).then(res => {
        if (res.data.code == 200) {
          this.getNewsAll(this.searchAll);
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    },
    editHotel(item) {
      if (item) {
        this.Hotel = item;
        this.selectedOptions = [
          this.Hotel.province,
          this.Hotel.city,
          this.Hotel.area
        ];
        if (this.Hotel.town) {
          this.selectedOptions.push(this.Hotel.town);
        }
        this.plad = this.selectedOptions.join("-");
        this.JWD = this.Hotel.latitude + "," + this.Hotel.longitude;
        this.label_logo = this.Hotel.label_logo.split("@");
        this.piclink = JSON.parse(this.Hotel.piclink);
      } else {
        this.Hotel = {
          logo: "",
          img: ""
        };
        this.selectedOptions = [];
        this.JWD = "";
        this.label_logo = [];
        this.piclink = [{ img: "" }];
      }
      this.showHotel = true;
    },
    subHotel() {
      var JWD = this.JWD;
      var jwd_ar = JWD.split(",");
      this.Hotel.longitude = jwd_ar[1]; //经度
      this.Hotel.latitude = jwd_ar[0]; //纬度
      this.Hotel.label_logo = this.label_logo.join("@");
      this.Hotel.piclink = JSON.stringify(this.piclink);
      if (this.Hotel.id) {
        this.$api.getHotel.hotel_saveedit(this.Hotel).then(res => {
          if (res.data.code == 200) {
            this.$fnc.alertSuccess("操作成功");
            this.showHotel = false;
            this.showHotelImgs = false;
            this.showHotelJs = false;
            this.getNewsAll(this.searchAll);
          } else {
            this.$fnc.alertError(res.data.result);
          }
        });
      } else {
        this.$api.getHotel.hotel_saveadd(this.Hotel).then(res => {
          if (res.data.code == 200) {
            this.$fnc.alertSuccess("操作成功");
            this.showHotel = false;
            this.getNewsAll(this.searchAll);
          } else {
            this.$fnc.alertError(res.data.result);
          }
        });
      }
    },
    getSearch(obj) {
      this.searchAll = obj;
      this.getNewsAll(obj);
    },
    getNewsAll(data) {
      this.loading = true;
      var params = {};
      data = data || {};
      params = data;

      this.$api.getHotel.hotel_lists(params).then(res => {
        if (res.data.code == 200) {
          this.list = res.data.result;
        }
        this.loading = false;
      });
    },
    handleSizeChange: function(size) {
      var params = this.searchAll;
      params.page = 1;
      params.page_size = size;
      this.pageSize = size;
      this.currentPage = 1;
      this.getNewsAll(params);
    },
    handleCurrentChange: function(currentPage) {
      var params = this.searchAll;
      params.page = currentPage;
      params.page_size = this.pageSize;
      this.currentPage = parseInt(currentPage);
      this.getNewsAll(params);
    },
    deleteNew(id) {
      this.$swal({
        title: "您确定要删除这条信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思"
      }).then(willDelete => {
        if (willDelete.value) {
          var data = { id: id };
          this.$api.getHotel.hotel_del(data).then(res => {
            if (res.data.code == 200) {
              this.$swal("删除成功！", "您已经删除了这条信息。", "success");
              this.getNewsAll(this.searchAll);
            } else {
              this.$swal("删除失败！", res.data.result, "error");
            }
          });
        }
      });
    }
  },
  created() {
    this.getNewsAll();
    this.getLogo();
  }
};
</script>

<style lang="less" scoped>
.myblank button {
  margin: 5px 5px 0 0;
}
.user_table span {
  font-size: 13px;
}
</style>
